<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="css/style.css" />
</head>

<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span></td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span></td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span></td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                    <td class="price">640.60</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span></td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
            </tbody>
        </table>
        <div class="foot" id="foot">

            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>
</body>
<script>
    //+号点击以后 三件事情 1: 数量(加号前面的文本框中)+1  减号(文本框前面)出来   小计(加号父元素的后面)更新
    var addBtnList = document.getElementsByClassName("add"); //这是一个加号的集合
    for (let i = 0; i < addBtnList.length; i++) {
        let addBtn = addBtnList[i];
        addBtn.onclick = function () {
            //alert("6666");
            var countInput = this.previousElementSibling;
            countInput.value = countInput.value * 1 + 1; //1+1

            var reduceSpan = countInput.previousElementSibling;
            reduceSpan.innerHTML = "-";

            var addBtnParent = this.parentNode;
            var priceTd = addBtnParent.previousElementSibling;
            var price = priceTd.innerHTML;
            var subtotalTd = addBtnParent.nextElementSibling;
            subtotalTd.innerHTML = (price * countInput.value).toFixed(2);
            getTotal();
        }
    }

    var reduceBtnList = document.getElementsByClassName("reduce");

    for (let i = 0; i < reduceBtnList.length; i++) {
        let reduceBtn = reduceBtnList[i];
        reduceBtn.onclick = function () {

            var countInput = this.nextElementSibling;
            if (countInput.value == 1) { //先判断数量是否为1 为1的话点击无效
                return false;
            }

            countInput.value = countInput.value - 1;

            if (countInput.value == 1) {
                this.innerHTML = "";
            }

            var reduceBtnParent = this.parentNode;
            var priceTd = reduceBtnParent.previousElementSibling;
            var price = priceTd.innerHTML;
            var subtotalTd = reduceBtnParent.nextElementSibling;
            subtotalTd.innerHTML = (price * countInput.value).toFixed(2);
            getTotal();


        }

    }
    //单选和全选
    var checkAllBtn = document.getElementsByClassName("check-all")[0];
    var checkOneList = document.getElementsByClassName("check-one");
    var maxCount = checkOneList.length;
    var count = 0;

    checkAllBtn.onclick = function () {
        // alert(this.checked);
        var flag = this.checked;
        for (var i = 0; i < checkOneList.length; i++) {
            checkOneList[i].checked = flag;
        }
        if (flag) {
            count = maxCount;
        } else {
            count = 0;
        }
        getTotal();
    }

    for (let i = 0; i < checkOneList.length; i++) {
        checkOneList[i].onclick = function () {
            if (this.checked) {
                count++;
            } else {
                count--;
            }
            if (count == maxCount) {
                checkAllBtn.checked = true;
            } else {
                checkAllBtn.checked = false;
            }
            getTotal();
        }
    }


    function getTotal() {
        var selectedTotalSpan = document.getElementById("selectedTotal");
        var priceTotalSpan = document.getElementById("priceTotal");
        //看每一行的checkOne是否被选中 如果选中了 该行对应的数量 和 改行对应的小计  最后求和
        var count = 0;
        var subtotal = 0;
        for (var i = 0; i < checkOneList.length; i++) {
            if (checkOneList[i].checked) {
                var tr = checkOneList[i].parentNode.parentNode;
                var countInput = tr.getElementsByClassName("count-input")[0];
                var subtotalTd = tr.getElementsByClassName("subtotal")[0];
                count = count + countInput.value * 1
                subtotal = subtotal + subtotalTd.innerHTML * 1;
            }
        }
        //循环完了 才能放
        selectedTotalSpan.innerHTML = count;
        priceTotalSpan.innerHTML = subtotal.toFixed(2);

    }


    var delList = document.getElementsByClassName("delete");
    for (var i = 0; i < delList.length; i++) {
        delList[i].onclick = function () {
            var tr = this.parentNode.parentNode;
            //判断 选择的行的checkBox是否被选择
            var checkBox = tr.getElementsByClassName("check-one")[0];
            tr.remove();
            //选择删除以后 同步更新全选和反选
            maxCount = checkOneList.length;
            if (checkBox.checked) {
                count--;
            }
            if (count == maxCount) {
                checkAllBtn.checked = true;
            } else {
                checkAllBtn.checked = false;
            }
            getTotal();

        }
    }


    var deleteAllBtn = document.getElementById("deleteAll");
    deleteAllBtn.onclick = function () {

        for (let i = 0; i < checkOneList.length; i++) {
            //不要滥用this
            if (checkOneList[i].checked) {
                checkOneList[i].parentNode.parentNode.remove();
                getTotal();
                checkAllBtn.checked = false;
                i--;
                maxCount = checkOneList.length;
                count--;
            }
        }
    }
    // [2,3,4]
    //  i=0; lenth =4 
    //  i=1  length=3  [2,4]
    //  i=2  length =2 

    //[1,2,3,4]
    //i =0   len = 4   [2,3,4]    i-- i=-1
    //i =0   len =3     [3,4]    i--
    // i=0   len 2       [4]  i--
    //i=0    len =1 

    var allCheckOneList = document.querySelectorAll(".check-one");//就是一个死集合 不会随着页面dom元素的消失而减少
</script>

</html>